<template>
	<div class="admin-develop-api" :style="`height: ${documentHeight}px;`">
		<div class="task-search">
			<div class="task-search_martio">
				<div class="task-search_text">API接口文档</div>
				<div class="task-search_box">
					<i class="el-icon-search"></i>
					<el-autocomplete v-model="state" placeholder="请输入搜索内容" popper-class="name" :fetch-suggestions="querySearchAsync" @select="handleSelect"></el-autocomplete>
				</div>
			</div>
		</div>
		<div class="develop-api_box">
			<apiLft @changeData="changeData" @apiChang="apiChang"></apiLft>
			<apiRight v-if="!conversionFool" ref="apiRight"></apiRight>
			<apiHome v-else></apiHome>
		</div>
	</div>
</template>
<script>
	import apiLft from './widget/api-left.vue'
	import apiRight from './widget/api-right.vue'
	import apiHome from './widget/api_home.vue'
	import ala from 'ala'
	export default {
		components: {
			apiLft,
			apiRight,
			apiHome
		},
		data() {
			return {
				selectInput: '',
				documentHeight: 0,
				conversionFool: true,
				state: '',
				viewModel: [],
				searchList: [], // 存储搜索数据
				searchModel: null // 存储已选择数据
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				var h = document.documentElement.clientHeight || document.body.clientHeight
				this.documentHeight = h - 74
				if (this.$route.query.type) {
					this.routeQuery()
				}
			},
			async routeQuery() {
				var repones = await ala.httpGet(`api/develop/apis?type=${this.$route.query.type}`)
				if (repones) {
					var valueArray = await await ala.httpGet(`api/develop/apis?type=${repones[0].info.fullName}`)
					if (valueArray) {
						if (valueArray[0].methods) {
							valueArray[0].methods[0].fullName = this.$route.query.type
							this.apiChang(valueArray[0].methods[0])
						}
					}
				}
			},
			changeData(data) {
				this.viewModel = data
			},
			apiChang(val) {
				this.conversionFool = false
				this.$nextTick(() => {
					this.$refs.apiRight.init(val)
				})
			},
			async querySearchAsync(queryString, cb) {
				let result = await ala.httpGet(`api/develop/apis?type=${queryString}`)
				if (result) {
					result.forEach(element => {
						element.value = element.info.key
					})
				}
				cb(result)
			},
			async handleSelect(data) {
				this.searchModel = data
				this.$router.push('/Admin/Develop/Api?type=' + data.info.key)
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>